<template>

  <div class="pay-body-dialog">

    <!-- 列表信息-->
    <div class="background-white mess-list mem">
      <div class="share-list-top">
        <img :src="share" style="width: 24px;height: 24px">
        <div class="share-list-top-right">
          <p class="times">可共享客户数：<span>112</span></p>
          <p class="tips">共享次数可通过邀请客户获取</p>
        </div>
      </div>
      <div class="mess-list-layout">
        <div class="top-item">
          <div class="top-item">
            <p>地区筛选：</p>
            <div>
              <el-select v-model="address" placeholder="请选择">
                <el-option
                  v-for="item in addresses"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="top-item margin-l">
            <p>客户名称：</p>
            <div>
              <el-input
                placeholder="请输入"
                v-model="customerName"
                clearable>
              </el-input>
            </div>
          </div>

          <div class="top-item margin-l">
            <p>单位名称：</p>
            <div>
              <el-input
                placeholder="请输入"
                v-model="company"
                clearable>
              </el-input>
            </div>
          </div>
          <div class="top-item margin-l">
            <el-button type="danger" size="mini">查询</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </div>
        </div>
        <div>
          <el-button type="success" @click="addCustomer(multipleSelection)"><i class="el-icon-plus"></i>添加</el-button>
        </div>
      </div>

      <div style="margin-top: 16px">
        <el-table
          :data="messData"
          ref="multipleTable"
          style="width: 100%"
          :cell-style="{height:49+'px'}"
          :header-cell-style="{background:'#F3F4F7',color:'#999999'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            label="订单名称"
            prop="orderName">
          </el-table-column>
          <el-table-column
            label="项目负责人"
            prop="name">
          </el-table-column>

          <el-table-column
            label="客户名称"
            prop="customerName"
          >
          </el-table-column>

          <el-table-column
            label="客户联系方式"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isSelected"> {{ scope.row.phone }}</span>
              <span v-if="!scope.row.isSelected"> {{ scope.row.phone }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="right"
          >
            <template slot-scope="scope">
              <el-button
                size="medium "
                @click="addSingle(scope.$index,scope.row)">
                <i class="el-icon-plus"></i>
                添加
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 30px;text-align: right">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>

  </div>

</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import share from 'assets/icons/share.svg'

  export default {
    layout: 'frame',
    name: "index",

    data() {
      return {
        share: share,
        customerName: '',
        company: '',
        messData: [
          {
            id: 1,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '方案被选中后展示',
            address: '方案被选中后展示',
            state: '1',
            isSelected: false

          }, {
            id: 2,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '方案被选中后展示',
            address: '方案被选中后展示',
            state: '2',
            isSelected: false

          }, {
            id: 3,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '3',
            isSelected: true

          }, {
            id: 4,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '4',
            isSelected: true

          }, {
            id: 5,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '5',
            isSelected: true
          }, {
            id: 6,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '6',
            isSelected: true
          }, {
            id: 7,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '7',
            isSelected: true
          }, {
            id: 8,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '8',
            isSelected: true
          }],

        addresses: [{
          value: '1',
          label: '北京'
        }, {
          value: '2',
          label: '贵州'
        }, {
          value: '3',
          label: '山东'
        }, {
          value: '4',
          label: '河南'
        }, {
          value: '5',
          label: '重庆'
        }],
        address: ''
      }
    },
    beforeUpdate() {
      this.initInfo()
    },
    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),
    },
    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread', 'SetCurrentPath'
      ]),
      //初试化
      initInfo() {
        this.SetIsShowBread(true);  //设置面包屑导航是否显示

        this.SetCurrentPath({url: '/', title: '客户共享'});
      },
      //重置
      reset() {
        this.customerName = '';
        this.company = '';
        this.address = ''
      },

      //批量添加
      addCustomer(rows) {
        console.log(rows)
        let index = 0;
        if (rows && rows.length > 0) {
          this.$confirm('' +
            '消耗' + index + '共享客户次数\n' +
            '添加已选中客户？')
            .then(_ => {
              rows.forEach((row) => {
                this.messData.forEach((initRow, index) => {
                  if (row.id == initRow.id) {
                    this.messData.splice(index, 1)
                    //请求

                  }
                })
              });
            })
            .catch(_ => {
            });
        } else {//无数据的提示
          this.$confirm('请勾选需要添加的客户？')
            .then(_ => {
            })
            .catch(_ => {
            });
        }
      },

      //单个添加
      addSingle(index, row) {
        let _this = this;
        this.$confirm('' +
          '消耗' + index + '共享客户次数\n' +
          '添加已选中客户？')
          .then(_ => {
            _this.messData.forEach((initRow, index) => {
              if (row.id == initRow.id) {
                _this.messData.splice(index, 1)
                //请求

              }
            })
          })
      },

      //总操作数据源
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    },
  }
</script>

<style lang="scss">
  .share-list-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 16px;

    img {
      width: 24px;
      height: 24px;
    }

    .share-list-top-right {
      margin-left: 12px;


      .times {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.847058823529412);

        span {
          font-size: 18px;
        }
      }

      .tips {
        margin-top: 6px;
        font-size: 12px;
        color: #CCCCCC;
      }
    }
  }

  .top-item {
    display: flex;
    flex-direction: row;
    align-items: center;

    p {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.847058823529412);
    }
  }

  .margin-l {
    margin-left: 20px;
  }


</style>
